<template>
	<view class="ask-for-leave">
		<uni-nav-bar dark :fixed="true" :border="false" background-color="#FFFFFF" status-bar title="请假"
			left-icon="left" @clickLeft="toBack" color="#000" />
		<view class="ask-for-leave-body">
			<u-cell-group>
				<u-cell title="请假类型" @click="vacateTypeShow = true" :isLink="true" :value="selectVacateType.label">
				</u-cell>
				<u-picker :show="vacateTypeShow" :columns="vacateTypeList" keyName="label" 
					:closeOnClickOverlay="true" @close="vacateTypeShow = false"
					@confirm="pickerConfirm" @cancel="pickerCancel">
				</u-picker>
			</u-cell-group>
			<u-cell-group>
				<u-cell title="开始时间(必填)"></u-cell>
				<uni-datetime-picker type="datetime" v-model="attendanceApply.startTime" />
				<u-cell title="结束时间(必填)"></u-cell>
				<uni-datetime-picker type="datetime" v-model="attendanceApply.stopTime" />
			</u-cell-group>
			<u-cell-group>
				<u-cell title="请假事由"></u-cell>
				<u--textarea v-model="attendanceApply.applyExplain" placeholder="请输入内容">
				</u--textarea>
			</u-cell-group>
			<u-cell-group>
				<u-cell title="说明附件" value="+" @click="uploadImg"></u-cell>
				<view v-for="(item,index) in imgList" :key="index" style="padding: 15rpx 30rpx;">
					<view style="display: flex;background-color: #eeeeef;
						border-radius: 8rpx;">
						<view style="width: 100rpx; height: 100rpx;" @click="previewImg()">
							<image style="width: 100%; height: 100%;border-radius: 8rpx;" mode="aspectFill" :src="READ_IMG_URL+item">
							</image>
						</view>
						<view style="flex: 1;margin-left: 15rpx;line-height: 100rpx;
							display: flex;justify-content: space-between;
							padding-right: 15rpx;">
							<text></text>
							<u-icon name="close" size="15" @click="deleteImg(index)">
							</u-icon>
						</view>
					</view>
				</view>
			</u-cell-group>
			<view style="width: 100%;">
				<view style="width: 90%;margin: auto;margin-top: 40rpx;">
					<u-button shape="circle" type="primary" @click="submit">
						提交
					</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import attendanceApi from '../../request/attendanceApi';
	import config from '@/request/config.js';
	import {compareToTime} from '@/utils/timeUtil.js';
	export default {
		data() {
			return {
				READ_IMG_URL: config.READ_IMG_URL,
				userInfo: {},
				attendanceApply: {
					vacateType: 0, // 请假类型
					startTime: null, // 开始时间
					stopTime: null, // 结束时间
					applyExplain: null, // 请假事由
					accessoryUrl: null, // 说明附件
					applyType: 0 // 申请类型为请假
				},
				selectDate: {
					startTime: null,
					stopTime: null,
				},
				vacateTypeShow: false,
				selectVacateType: {
					value: 0,
					label: "事假"
				},
				vacateTypeList: [
					[{
						value: 0,
						label: "事假"
					}, {
						value: 1,
						label: "病假"
					}, {
						value: 2,
						label: "其他"
					}]
				],
				imgList: []
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync("loginUser");
		},
		methods: {
			// 返回上个页面
			toBack() {
				uni.navigateBack({
					delta: 1, // 返回的页面数，1表示返回上一页
					animationType: 'pop-out', // 页面关闭的动画效果
					animationDuration: 300, // 页面关闭的动画时间
				});
			},
			// 请假类型确定
			pickerConfirm(e) {
				this.selectVacateType = e.value[0]
				this.attendanceApply.vacateType = this.selectVacateType.value
				this.vacateTypeShow = false
			},
			// 请假类型取消
			pickerCancel() {
				this.vacateTypeShow = false
			},
			// 上传图片
			uploadImg() {
				let _this = this;
				uni.chooseImage({
					count: 6, //默认9张，这里限制6张
					success: function(res) {
						uni.showLoading({
							title: "上传中...",
							mask: true
						})
						const OaAuth = uni.getStorageSync("OaAuth") || '';
						let header = {
							"Content-Type": "application/json",
							"OaAuth": OaAuth,
						}
						res.tempFilePaths.forEach(item =>{
							let imgUrl = config.IMG_URL
							uni.uploadFile({
								url: imgUrl,
								fileType: 'image',
								filePath: item,
								name: 'file',
								header: header,
								success: (uploadFileRes) => {
									let fileRes = JSON.parse(uploadFileRes.data)
									if (fileRes.code === 200){
										_this.imgList.push(fileRes.data);
									}
								}
							});
						})
						uni.hideLoading();
					}
				});
			},
			// 预览图片
			previewImg() {
				let newList = []
				this.imgList.forEach(item =>{
					newList.push(this.READ_IMG_URL+item)
				})
				uni.previewImage({
					urls: newList,
					showmenu: false
				});
			},
			// 删除图片
			deleteImg(index) {
				this.imgList.splice(index, 1);
			},
			// 提交
			submit(){
				if (this.attendanceApply.startTime === null || 
					this.attendanceApply.startTime === ""){
					this.$tip.tip("请选择开始时间！")
					return;
				}
				if (this.attendanceApply.stopTime === null ||
					this.attendanceApply.stopTime === ""){
					this.$tip.tip("请选择结束时间！")
					return;
				}
				let startTime = this.attendanceApply.startTime.replace(' ','T');
				let stopTime = this.attendanceApply.stopTime.replace(' ','T');
				const time1 = new Date(startTime);
				const time2 = new Date(stopTime);
				const result = compareToTime(time1,time2);
				if (result === 1){
					// 开始时间大于结束时间
					this.$tip.tip('开始时间不能大于结束时间！');
					return;
				}
				if (this.imgList.length > 0){
					this.attendanceApply.accessoryUrl = this.imgList.join(";")
				}
				console.log("attendanceApply===>",this.attendanceApply);
				uni.showLoading({
					title: "提交中...",
					mask: true
				})
				attendanceApi.addAttendanceApply(this.attendanceApply).then(res =>{
					if (res.code === 200){
						this.attendanceApply = {
							vacateType: 0, // 请假类型
							startTime: null, // 开始时间
							stopTime: null, // 结束时间
							applyExplain: null, // 请假事由
							accessoryUrl: null, // 说明附件
						}
						uni.showToast({
							title: '提交成功',
							duration: 3000,
							icon: 'success'
						});
						uni.hideLoading();
						setTimeout(() =>{
							uni.navigateBack({
								delta: 1, // 返回的页面数，1表示返回上一页
								animationType: 'pop-out', // 页面关闭的动画效果
								animationDuration: 300, // 页面关闭的动画时间
							});
						},1500);
					}
				}).finally(() =>{
					uni.hideLoading();
				})
			}
		}
	}
</script>

<style>
	.ask-for-leave {
		min-height: 100vh;
		background-color: #eeeeef;
	}
	
	.u-cell-group {
		background-color: #ffffff;
		margin: 15rpx 0 15rpx 0;
	}
	
</style>